HTML

<div class="topic-group full-width">
    <div class="topics-nav">
        <h3 class="topics-nav-title h4">Topics Group Title</h3>
        <ul class="topics-nav-list">
            !--The list items here are being created dynamically by JavaScript due to the way the component was built in sitecore. However, I have added sample code here for demo only. Or, if you use this component outside of sitecore, you will need to use list items structured as such. --!
            <li class="topics-nav-list-item"><a href="#topic-title-one" data-toggle="tab">Topic Title One</a></li>
            <li class="topics-nav-list-item"><a href="#topic-title-two" data-toggle="tab">Topic Title Two</a></li>
            <li class="topics-nav-list-item"><a href="#topic-title-three" data-toggle="tab">Topic Title Three</a></li>
            <li class="topics-nav-list-item"><a href="#topic-title-four" data-toggle="tab">Topic Title Four</a></li>
            <li class="topics-nav-list-item"><a href="#topic-title-five" data-toggle="tab">Topic Title Five</a></li>
        </ul>
    </div>
    <div class="topics">
        <noscript>
            <style>
                .tab-content > .tab-pane {
                    display: block;
                    opacity: 1;
                }
                .topic-group > .topics {
                    display: block;
                    opacity: 1;
                }
            </style>
        </noscript>
        <ul class="tab-content topics-list">
            <li id="topic-title-one" class="topics-list-item">
                <h3 class="topics-list-item-title">Topic Title One</h3>
                <div class="topics-list-item-placeholder">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis viverra nibh cras pulvinar mattis nunc.</p>
                </div>
            </li>
            <li id="topic-title-two" class="topics-list-item">
                <h3 class="topics-list-item-title">Topic Title Two</h3>
                <div class="topics-list-item-placeholder">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis viverra nibh cras pulvinar mattis nunc.</p>
                </div>
            </li>
            <li id="topic-title-three" class="topics-list-item">
                <h3 class="topics-list-item-title">Topic Title Three</h3>
                <div class="topics-list-item-placeholder">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis viverra nibh cras pulvinar mattis nunc.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis viverra nibh cras pulvinar mattis nunc.</p>
                </div>
            </li>
            <li id="topic-title-four" class="topics-list-item">
                <h3 class="topics-list-item-title">Topic Title Four</h3>
                <div class="topics-list-item-placeholder">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis viverra nibh cras pulvinar mattis nunc.</p>
                </div>
            </li>
            <li id="topic-title-five" class="topics-list-item">
                <h3 class="topics-list-item-title">Topic Title Five</h3>
                <div class="topics-list-item-placeholder">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis viverra nibh cras pulvinar mattis nunc.</p>
                </div>
            </li>
        </ul>
        <div class="topics-nav-buttons">
            <button class="cfaicon-arrow_left topics-nav-buttons-previous" disabled="disabled" aria-labelledby="unique-id-1"><span id="unique-id-1" class="screen-reader-only">Previous section</span></button>
            <button class="cfaicon-arrow_right topics-nav-buttons-next" disabled="disabled" aria-labelledby="unique-id-2"><span id="unique-id-2" class="screen-reader-only">Next section</span></button>
        </div>
    </div>
</div>